{%extends 'base.html.twig' %}
{% block titulo %} Registrar Usuario {% endblock %}

{% block includes %}
<script type="text/javascript" src="{{ constant('ROOT')}}/js/lib/jquery-validate/jquery.validate.pack.js"></script>
<script type="text/javascript" src="{{ constant('ROOT')}}/js/lib/jquery-validate/localization/messages_es.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#registrar").validate();
        llenarEstados("#estados");
        $("#password2").rules('add',{
            equalTo:"#password",
            messsages:{
                equalTo:"La contraseña no coincide"
            }
        });
    });
</script>
{% endblock %}

{%block content %}
{% if result %}
    <div class="info">
        <p>Registro creado con éxito, ya puede iniciar sesión</p>
    </div>
{% else %}
{% if mensaje|length >0 %}
    <div class="error">
        <label>Error</label>
            {% for error in mensaje %}
                <p class="message">{{ error}} </p>
            {% endfor %}
    </div>
{% endif %}
<form class="yform columnar" action="registrar.php" method="post" name="registro" id="registrar">
    <fieldset>
        <legend>Datos Personales</legend>
        <div class="type-text">
            <label for="nombre">Nombre<sup>*</sup></label>
            <input type="text" name="nombre"  class="required"/>
        </div>
        <div class="type-text">
            <label for="apellido">Apellido<sup>*</sup> </label>
            <input type="text" name="apellido"  class="required"/>
        </div>
        <div class="type-text">
            <label for="id">Cédula/Rif</label>
            <select name="tipoid"  class="required">
                <option>V</option>
                <option>E</option>
                <option>J</option>
            </select>
            <input type="text" name="numeroid" style="width:64%; display:inline;"/>
        </div>
        <div class="type-text">
            <label for="telefono">Teléfono<sup>*</sup> </label>
            <input type="text" name="telefono"  class="required"/>
        </div>
        <div class="type-text">
            <label for="telefono2">Teléfono 2</label>
            <input type="text" name="telefono2"/>
        </div>
        <div class="type-select">
            <label for="estado">Estado<sup>*</sup> </label>
            <select name="estado" id="estados"  class="required">
                <option> - Seleccione</option>
            </select>
        </div>
        <div class="type-select">
            <label for="ciudad">Ciudad<sup>*</sup> </label>
            <select name="ciudad" id="ciudad"  class="required">
                <option> - Seleccione</option>
            </select>
        </div>
        <div class="type-text">
            <label for="direccion">Dirección <sup>*</sup></label>
            <textarea name="direccion" cols="5" rows="3"  class="required"></textarea>
        </div>
    </fieldset>
    <fieldset>
        <legend>Datos de su Cuenta</legend>
        <div class="type-text">
            <label for="usuario">Usuario <sup>*</sup> </label>
            <input type="text" name="usuario"  class="required"/>
        </div>
        <div class="type-text">
            <label for="password">Password <sup>*</sup></label>
            <input type="password" name="password"  class="required" id="password"/>
        </div>
        <div class="type-text">
            <label for="password2"  class="required">Repita su password:</label>
            <input type="password" name="password2" id="password2"/>
        </div>
        <div class="type-text">
            <label>Email:<sup>*</sup></label>
            <input type="text" class="required email"/>
        </div>
        <div class="type-button">
            <center><input type="submit" name="enviar" value="Enviar"/></center>
        </div>
    </fieldset>
</form>
{%endif %}
{% endblock %}

